<template>
    <el-dialog :title="$t('设置预警提醒')" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <!-- <span>这是一段信息</span> -->
        <el-row>
            <el-button type="primary" size="mini" @click="WarningInfo(undefined)" icon="el-icon-plus" round>{{ $t('Add') }}</el-button>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="任务编号" align="center" />
            <el-table-column prop="cron" label="定时任务" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.instructions" placement="top">
                        <span> {{ scope.row.cron }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="jobName" label="任务名称" align="center" />
            <el-table-column prop="status" label="开启/关闭" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-text="$t('开启')" :inactive-text="$t('关闭')"
                        :active-value="2" :inactive-value="0" @change="changeStatus(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column :label="$t('Operate')" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-setting" @click="WarningInfo(scope.row)" round :disabled="(scope.row.status == 2)">
                        {{ $t('编辑') }}</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" round :disabled="(scope.row.status == 2)">
                        {{ $t('删除') }}</el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- add -->
        <WarningInfo  ref="WarningInfo" :dialogVisible="WarningInfoVisible" @WarningInfoCancel="WarningInfoCancel" />

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">{{ $t('关闭') }}</el-button>
            <!-- <el-button type="primary" @click="handleConfirm">确 定</el-button> -->
        </span>
    </el-dialog>
</template>
  
<script>
import { getShopMerchandiseJob, deleteMerJob, updateMerJob } from '@/api/merchandiseWarning';
import WarningInfo from './warningInfo.vue';

export default {
    name: 'SetEarlyWarningReminders',
    components: { WarningInfo },
    props: {
        dialogVisible: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            WarningInfoVisible: false,
            tableData: [],
            shopMerchandiseId: undefined,
            value: 2,
            // form: {
            //     status: false,
            // },
        }
    },
    created() { },
    methods: {
        init() {
            // this.shopMerchandiseId = row.id;
            this.getList();
        },
        getList() {
            getShopMerchandiseJob().then(res => {
                // console.log(res.data.data);
                this.tableData = res.data.data;
            })
        },
        handleCancel() {
            this.$emit('SetEarlyWarningRemindersCancel');
        },
        handleClose() {
            this.$emit('SetEarlyWarningRemindersCancel');
        },
        WarningInfo(row) {
            if (this.tableData.length >= 7 && !row) {
                this.$message.warning(this.$t('定时任务不能超过7条'));
                return;
            }
            this.$refs.WarningInfo.init(this.shopMerchandiseId,row);
            this.WarningInfoVisible = true;
        },
        WarningInfoCancel() {
            this.getList();
            this.WarningInfoVisible = false;
        },
        handleDelete(row) {
            const { id } = row;
            deleteMerJob(id).then(res => {
                this.$message.success(this.$t(res.data.errmsg));
                this.tableData = this.tableData.filter(item => item.id != id);
            }).catch(e => {
                this.$message.error(this.$t('Failed'))
            })
        },
        changeStatus(row) {
            const mess = row.status ? '开启成功' : '关闭成功';
            updateMerJob(row).then(res => {
                this.$message.success(this.$t(mess));
                this.getList();
            }).catch(e => {
                this.$message.error(this.$t('Failed'))
            })
        }
    }

}
</script>
  
<style scoped>

</style>
  